<template>
     <div class="common-list comp-clients" :class="{ 'comp-clients--depts': !role || role === 'holder' || role === 'officer' }" v-loading.fullscreen="loading">
        <div class="deptss" v-if="!role || role === 'holder' || role === 'officer'">
            <div class="dept dept--lv0">
                <div class="name">组织架构</div>
            </div>
            <template v-for="dept1 in depts">
                <div class="dept dept--lv1" :key="" :class="{ expanded: dept1.expanded, selected: dept1.id === filters.deptId }">
                    <div class="expand" @click="expandDept(dept1)"></div>
                    <div class="name" @click="selectDept(dept1)">
                        <div class="text" >{{ dept1.name }}</div>
                        <div class="flag" v-if="dept1.type">{{ dept1.typeText }}</div>
                    </div>
                </div>
                <template v-for="dept2 in dept1.depts">
                    <div class="dept dept--lv2" :key="" :class="{ expanded: dept2.expanded, selected: dept2.id === filters.deptId }" v-if="dept1.expanded">
                        <div class="expand" @click="expandDept(dept2)"></div>
                        <div class="name" @click="selectDept(dept2)">
                            <div class="text">{{ dept2.name }}</div>
                            <div class="flag" v-if="dept2.type">{{ dept2.typeText }}</div>
                        </div>
                    </div>
                    <template v-for="dept3 in dept2.depts">
                        <div class="dept dept--lv3" :key="" :class="{ expanded: dept3.expanded, selected: dept3.id === filters.deptId }" v-if="dept1.expanded && dept2.expanded">
                            <div class="expand" @click="expandDept(dept3)"></div>
                            <div class="name" @click="selectDept(dept3)">
                                <div class="text">{{ dept3.name }}</div>
                                <div class="flag" v-if="dept3.type">{{ dept3.typeText }}</div>
                            </div>
                        </div>
                        <template v-for="dept4 in dept3.depts">
                            <div class="dept dept--lv4" :key="" :class="{ expanded: dept4.expanded, selected: dept4.id === filters.deptId }" v-if="dept1.expanded && dept2.expanded && dept3.expanded">
                                <div class="expand" @click="expandDept(dept4)"></div>
                                <div class="name" @click="selectDept(dept4)">
                                    <div class="text">{{ dept4.name }}</div>
                                    <div class="flag" v-if="dept4.type">{{ dept4.typeText }}</div>
                                </div>
                            </div>
                            <template v-for="dept5 in dept4.depts">
                                <div class="dept dept--lv5" :key="" :class="{ expanded: dept5.expanded, selected: dept5.id === filters.deptId }" v-if="dept1.expanded && dept2.expanded && dept3.expanded && dept4.expanded">
                                    <div class="expand" @click="expandDept(dept5)"></div>
                                    <div class="name" @click="selectDept(dept5)">
                                        <div class="text">{{ dept5.name }}</div>
                                        <div class="flag" v-if="dept5.type">{{ dept5.typeText }}</div>
                                    </div>
                                </div>
                            </template>
                        </template>
                    </template>
                </template>
            </template>
        </div>
      
     
    </div>
</template>

<script>
    import mixin from "../mixin";
    import { object, array, string, int, session } from "../util";
    export default {
        name: "dep",
        mixins: [mixin],
        props: {
            role: { type: String, default: null },
            select: { type: Boolean, default: false },
            link: { type: Boolean, default: false },
            getid:{ type:Object, default:false },
        },
        data: () => ({
            loading: false,
            filters: {
                ids: null,
                number: null,
                name: null,
                sex: null,
                mobile: null,
                role: null,
                deptId: null,
                banned: null,
                flag:null,
                linage: 10,
                page: 1,
                total: 0,
            },
            list: [],
            selects: [],
            depts: [],
            num:null

        }),
        mounted(){
           this.init()
        //    console.log(res);
        },
        methods: {
            generateRandomNumber(digit) { //若为4
                const min = Math.pow(20, digit - 1) // 最小值，即1000
                const max = Math.pow(20, digit) - 1 // 最大值，即9999
                const randomNumber = Math.floor(Math.random() * (max - min + 1)) + min
                return randomNumber.toString()
                },
            reset(deep) {
                let data = deep ? {} : object(session([this.env.key, this.$options.name, "filters", this.$route.fullPath]));
                this.filters = Object.assign(this.$options.data().filters, data);
                this.filters.deptId = null;
            },
            validate() {
                let filters = this.filters;
                filters.ids = null;
                filters.role = this.role || filters.role;
                filters.total = Math.max(int(filters.total), 0);
                filters.linage = Math.max(int(filters.linage), 1);
                filters.page = Math.max(Math.min(int(filters.page), Math.ceil(filters.total / filters.linage)), 1);
                session([this.env.key, this.$options.name, "filters", this.$route.fullPath], filters);
            },
            onTableSelectionChange(selects) {
                // console.log(selects);
                let weijiselects = selects.filter(item =>item.flag == "not")
                if(selects.length===0){
                    this.filters.ids = null
                }
                console.log(weijiselects);
                this.filters.ids = weijiselects.map((data) => data.id);
                // console.log(this.filters.ids);
                this.selects = selects;
            },
            expandDept(dept) {
                if (dept.expanded) {
                    dept.expanded = false;
                } else if (dept.loaded) {
                    dept.expanded = true;
                } else {
                    this.loading = true;
                    this.plugins.user.getDeptsother({ deptId: dept.id, linage: 1000, page: 1 }).then((res) => {
                        // console.log(res,123);
                        this.loading = false;
                        if (res.code === 0) {
                            dept.depts = res.data.list;
                            dept.depts.forEach((item) => {
                                item.dept.name = dept.name;
                                item.level = dept.level + 1;
                            });
                            dept.depts.sort((a, b) => {
                                let a1 = a.city.id;
                                let a2 = a.county.id;
                                let a3 = a.sort;
                                let b1 = b.city.id;
                                let b2 = b.county.id;
                                let b3 = b.sort;
                                return a1 === b1 ? a2 === b2 ? b3 - a3 : a2 - b2 : a1 - b1;
                            });
                            dept.expanded = true;
                            dept.loaded = true;
                        } else {
                            this.plugins.modal.toast("加载失败<br>" + res.code + "：" + res.msg, "error");
                        }
                    });
                }
            },
            selectDept(dept) {
                if(dept.id == this.getid.id){
                       this.plugins.modal.toast("更改部门不能选择自己为部门","error");
                }else{
                        this.filters.deptId = this.filters.deptId === dept.id ? "" : dept.id;
                        this.$emit('getsetletDept',dept);
                }
                // console.log(this.filters);
               
                // console.log(dept);
            },
            init() {
                
                this.loading = true;
                this.plugins.user.call(async () => {
                    let length = this.depts.length;
                    if (length === 0) this.depts = this.role && this.role === "staff" ? [] : await this.plugins.user.getDeptsother({ level: 1, linage: 1000, page: 1 }).then((res) => array(() => res.data.list).sort((a, b) => b.sort - a.sort));
                    return { code: 0 };
                }).then((res) => {
                    this.loading = false;
                    this.reset();
                });
            },
        },
    };
</script>

<style lang="scss">
    .comp-clients {
        overflow: hidden;
    }

    .comp-clients--depts {
        padding-left: 302px;

        & > .deptss {
            position: absolute;
            top: 0;
            left: 0;
            border: solid 1px #ddd;
            width: 98%;
            height: calc(100% - 2px);
            overflow-x: hidden;
            overflow-y: auto;
            scrollbar-width: none;

            &::-webkit-scrollbar {
                width: 6px;
                height: 1px;
            }

            &::-webkit-scrollbar-track {
                background-color: transparent;
            }

            &::-webkit-scrollbar-thumb {
                background-color: #ddd;
            }

            & > .dept {
                display: flex;
                align-items: flex-start;
                border-bottom: dashed 1px #ddd;
                user-select: none;
                cursor: pointer;

                & > .expand {
                    flex: 0 0 auto;
                    padding: 6px;
                    width: 20px;
                    height: 20px;
                    color: #aaa;
                    font-size: 16px;
                    line-height: 20px;
                    text-align: center;
                    user-select: none;
                    cursor: pointer;

                    &:before {
                        content: "+";
                    }
                }

                & > .name {
                    flex: 1 1 0;
                    display: flex;
                    align-items: flex-start;
                    padding: 7px 6px 7px 0;

                    & > .text {
                        flex: 0 1 auto;
                        min-height: 18px;
                        color: #333;
                        font-size: 14px;
                        line-height: 18px;
                    }

                    & > .flag {
                        flex: 0 0 auto;
                        margin-left: 0.5em;
                        height: 18px;
                        color: #999;
                        font-size: 14px;
                        line-height: 18px;
                    }
                }

                &.expanded {
                    & > .expand {
                        &:before {
                            content: "-";
                        }
                    }
                }

                &.selected {
                    background-color: #d9e5f5;

                    & > .name {
                        color: #1677ff;
                    }
                }
            }

            & > .dept--lv0 {
                position: sticky;
                top: 0;
                left: 0;
                z-index: 1;
                background-color: white;

                & > .name {
                    display: block;
                    height: 18px;
                    color: #333;
                    font-size: 14px;
                    font-weight: bold;
                    line-height: 18px;
                    text-align: center;
                }
            }

            & > .dept--lv1 {
                margin-left: 0;
            }

            & > .dept--lv2 {
                margin-left: 28px;
            }

            & > .dept--lv3 {
                margin-left: 56px;
            }

            & > .dept--lv4 {
                margin-left: 84px;
            }

            & > .dept--lv5 {
                margin-left: 112px;
            }
        }
    }
</style>